<template>
	<view class="reward-list">
		<g-navbar title="激活达标奖励" />
		<searchBar v-model="keyword" @confirmSearch="confirmSearch" @clearSearch="clearSearch" />
		<rewardHistoryList style="flex:1;overflow: hidden;" :keyword="keyword" ref="rewardHistoryListRef" />
	</view>
</template>

<script lang="ts" setup>
	import searchBar from './components/search-bar/searchBar.vue';
	import rewardHistoryList from './components/reward-history-list/rewardHistoryList.vue';
	import { Ref, ref } from 'vue';
	import { IRewardHistoryListExpose } from './components/reward-history-list/types';

	const rewardHistoryListRef : Ref<IRewardHistoryListExpose | null> = ref(null);


	const keyword : Ref<string> = ref('');

	const confirmSearch = () => {
		rewardHistoryListRef.value!.searchByKeyword(keyword.value);
	}
	
	const clearSearch = () => {
		rewardHistoryListRef.value!.searchByKeyword(keyword.value);
	}
</script>

<style scoped lang="scss">
	@import "./rewardList.scss";
</style>